<template>
  <!--table公共组件-->
  <!--需要传值如下：-->
  <!--1.table表头和操作栏配置项,支持自定义外抛事件,每列宽度通过width设置：-->
  <!--tableHeader: [-->
  <!--{prop: 'date', label: '日期'},-->
  <!--{prop: 'name', label: '姓名'},-->
  <!--{prop: 'address', label: '地址', width: 300},-->
  <!--{prop: 'operaSet', label: '操作', width: 300, opera: [{actMethod: 'aaaa', actName: 'aaaaa'}, {actMethod: 'update', actName: '修改'}, {actMethod: 'del', actName: '删除'}]}-->
  <!--], -->
  <!--2.表格数据-->
  <!--tableData: [{-->
  <!--date: '2016-05-02',-->
  <!--name: '王小虎',-->
  <!--address: '上海市普陀区金沙江路 1518 弄'-->
  <!--}, {-->
  <!--date: '2016-05-04',-->
  <!--name: '王小虎',-->
  <!--address: '上海市普陀区金沙江路 1517 弄'-->
  <!--}, {-->
  <!--date: '2016-05-01',-->
  <!--name: '王小虎',-->
  <!--address: '上海市普陀区金沙江路 1519 弄'-->
  <!--}, {-->
  <!--date: '2016-05-03',-->
  <!--name: '王小虎',-->
  <!--address: '上海市普陀区金沙江路 1516 弄'-->
  <!--}]-->
  <!--3.父级通过exportAct方法接收外抛事件-->
  <div class="diy-table">
    <el-table :data="tableData" stripe style="width: 100%" size="mini">
      <template v-for="item in tableHeader">
        <!--传入的数据中，如果有座席数据，可以用座席组件展示-->
        <el-table-column
          v-if="item.prop !== 'operaSet' && item.prop !== 'UpdateAgent'"
          :width="item.width"
          :prop="item.prop"
          :label="item.label">
        </el-table-column>
        <!--用坐席组件回显座席-->
        <el-table-column
          v-if="item.prop === 'UpdateAgent'"
          :width="item.width"
          :label="item.label">
          <template scope="scope">
            <agent
              :id="scope.row.UpdateAgent"
              :isNum="true"
            ></agent>
          </template>
        </el-table-column>
        <el-table-column
          v-if="item.prop === 'operaSet'"
          :width="item.width"
          :label="item.label">
          <template scope="scope">
            <el-button v-for="one in item.opera" type="text" @click="exportAct({actMethod: one.actMethod, data: scope.row})" size="small" :class="one.actMethod">{{one.actName}}</el-button>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  export default {
    data () {
      return {
      }
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      tableHeader: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    methods: {
      exportAct (obj) {
        this.$emit('exportAct', obj)
      }
    },
    components: {
      Agent
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .diy-table
    .update
      cursor pointer
    .del
      color $c-pink
      cursor pointer
</style>
